<!-- 热歌榜 -->
<template>
  <div style="position: relative;">
    <!-- 加载中 -->
    <div v-if="!songlist.length && !reList.length" class="loading">
      <van-loading color="#1989fa" size="50px" />
    </div>
    <!-- 加载结果 -->
    <div class="m-sglst" v-else>
      <div @click="playSong(item.id, item.fee)" class="m-sgitem" v-for="(item, index) in isHit ? reList : songlist" :key="item.id">
        <div v-if="!id" class="sgfl" :class="index < 3 ? 'sgfl-cred' : ''">{{ num(index + 1) }}</div>
        <div v-else class="sgfl">{{ index + 1 }}</div>
        <div class="sgfr f-bd f-bd-btm">
          <div class="sgchfl">
            <div class="f-thide sgtl">
              {{ item.name }}
              <span class="sgalia" v-if="item.alia[0]">({{ item.alia[0] }})</span>
            </div>
            <div class="f-thide sginfo">
              <i class="u-hmsprt sghot" v-if="type && item.sq"></i>
              {{ singer(item.ar) }} - {{ item.al.name }}
            </div>
          </div>
          <div class="sgchfr">
            <span class="u-hmsprt sgchply"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { singer, playSong } from '@/utils/dedicated'
import { hitSongAPI } from '@/api'
export default {
  name: 'hitSong',
  props: {
    // 歌单列表
    songlist: {
      type: Array,
      default: () => [],
    },
    // 是否显示音乐品质 sq
    type: {
      type: Boolean,
      default: true,
    },
    // 是否热歌榜
    isHit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: this.$route.query.id, //获取当前路由的id值
      reList: [], // 热门歌曲
    }
  },
  computed: {
    //名字之间加间隔符
    singer,
    //单个数字前面加"0"
    num() {
      return (n) => {
        n = n < 10 ? '0' + n : n
        return n
      }
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 歌曲播放限制
    playSong,
    // 获取歌曲
    getData() {
      if (this.isHit) {
        hitSongAPI({ id: 3778678 }).then((res) => {
          this.reList = res.data.playlist.tracks.slice(0, 20)
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(100%);
}
.m-sglst {
  position: relative;
  .m-sgitem {
    display: flex;
    padding-left: 10px;
    .sgfl {
      color: #999;
      align-items: center;
      justify-content: center;
      width: 40px;
      font-size: 17px;
      margin-left: -10px;
      text-align: center;
      line-height: 51px;
    }
    .sgfl-cred {
      color: #df3436;
    }
    .sgfr {
      flex: 1 1 auto;
      display: flex;
      position: relative;
    }
    .sgchfl {
      padding: 6px 0;
      width: 0;
      flex: 1 1 auto;
      .f-thide {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
    }
    .sgchfr {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .sgtl {
      font-size: 17px;
      color: #333;
    }
    .sginfo {
      font-size: 12px;
      color: #888;
    }
    .sghot {
      display: inline-block;
      width: 12px;
      height: 8px;
      margin-right: 4px;
    }
    .sgchply {
      display: inline-block;
      width: 22px;
      height: 22px;
      background-position: -24px 0;
    }
    .sgalia {
      color: #888;
      margin-left: 4px;
    }
  }
  .m-sgitem:last-child .sgfr:after {
    display: none;
  }
  .u-hmsprt {
    background: url('../assets/home/sq-bofang.png') no-repeat;
    background-size: 166px 97px;
  }
}

.f-bd:after {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  position: absolute;
  z-index: 2;
  content: '';
  top: 0;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
  transform-origin: top left;
  border: 0 solid rgba(0, 0, 0, 0.1);
}
.f-bd-btm:after {
  border-bottom-width: 1px;
}
</style>
